<template>
  <view class="total">
    <view class="room-detail bg-white">
      <view class="base-title">房间信息</view>
      <view class="content">
        <view class="line">
          <text class="label">房型：</text>
          <text class="value">{{ ReceiveDetail.RoomClass }}</text>
        </view>
        <view class="line">
          <text class="label">实际房价：</text>
          <text class="value">{{ ReceiveDetail.Price }}</text>
        </view>
        <view
          class="line"
          v-if="filter_receiveClass(ReceiveDetail.ReceiveClass) !== '钟点'"
        >
          <text class="label">预住天数：</text>
          <text class="value">{{ ReceiveDetail.Days }}天</text>
        </view>
        <view class="line" v-else>
          <text class="label">预住小时：</text>
          <text class="value">{{ ReceiveDetail.Days }}小时</text>
        </view>
        <view class="line">
          <text class="label">抵离时间：</text>
          <text class="value">
            {{ ReceiveDetail.CheckInDate }} — {{ ReceiveDetail.WillLeave }}
          </text>
        </view>
      </view>
    </view>

    <view class="receive-man bg-white">
      <view class="base-title">住客信息</view>
      <view
        class="content"
        :key="item.id"
        v-for="item in ReceiveDetail.ReceiveMan"
      >
        <view class="align-center justify-between">
          <view class="line">
            <text class="label">姓名：</text>
            <text class="value">{{ item.Name }}</text>
          </view>
          <view class="line">
            <text class="label">手机号：</text>
            <text class="value">{{ item.Tel }}</text>
          </view>
        </view>

        <view class="align-center justify-between">
          <view class="line">
            <text class="label">性别：</text>
            <text class="value">{{ item.Sex }}</text>
          </view>
          <view class="line">
            <text class="label">证件类型：</text>
            <text class="value">{{ filter_idType(item.idType) }}</text>
          </view>
        </view>

        <view class="line">
          <text class="label">入住时间：</text>
          <text class="value">{{ item.CheckIn }}</text>
        </view>

        <view class="line">
          <text class="label">证件号码：</text>
          <text class="value">{{ item.Code }}</text>
        </view>
      </view>

      <view class="justify-end buttons">
        <view class="info button">删除</view>
        <view class="edit button">编辑</view>
      </view>
    </view>

    <view class="add-receive-man bg-white flex-center">
      <view class="flex-center">
        <image
          style="
            width: 34rpx;
            height: 34rpx;
            margin-right: 20rpx;
            margin-top: 8rpx;
          "
          src="@/static/images/room_status/detail/add-receive-man.png"
        ></image>
        <text>添加同住人</text>
      </view>
    </view>
    <view
      :style="{
        height: system.$platform().is_ios ? '300rpx' : '260rpx'
      }"
    ></view>

    <view class="fixed-bottom self-bottom">
      <view class="scope-button justify-around align-center">
        <view class="text">入账</view>
        <view class="text">续住</view>
        <view class="text">换房</view>
        <view class="text">冲账</view>
        <view class="text">转临</view>
        <view class="btn flex-center">联房结账</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import system from '@/utils/system'
import { get_receive_classes } from '@/storage/receive'
import { INF_ReceiveInfoV1_res } from '@/api/server/v1/receive'
import { init_ReceiveDetail } from '@/receivePages/detail/initState'

const props = defineProps({
  ReceiveDetail: {
    type: Object,
    default: () => ({})
  }
})

const ReceiveDetail = ref<INF_ReceiveInfoV1_res>(init_ReceiveDetail)

const filter_receiveClass = function (receiveClass: string | number) {
  const filKey = get_receive_classes().filter(
    (item) => item.numberValue === receiveClass
  )[0]?.key
  return filKey
}

const filter_idType = function (idType: number): string {
  switch (idType) {
    case 11:
      return '居民身份证'
    case 2:
      return '出生证'
    case 93:
      return '护照'
    case 99:
      return '其他'
    default:
      return ''
  }
}

watch(
  () => props.ReceiveDetail,
  (value) => (ReceiveDetail.value = value),
  { immediate: true }
)
</script>

<style lang="scss" scoped>
:deep(.uni-page-wrapper) {
  background-color: #f2f3f6 !important;
}

.total {
  background-color: #f2f3f6 !important;
  // common
  .content {
    .line {
      margin-top: 30rpx;
      flex: 1;
      font-family:
        Source Han Sans CN-Regular,
        Source Han Sans CN;
      font-weight: 400;
      font-size: 28rpx;
      .label {
        color: #666666;
      }
      .value {
        color: #333333;
      }
    }
  }

  .room-detail {
    padding: 50rpx;
    .base-title {
      padding-left: 0;
    }
  }

  .receive-man {
    padding: 50rpx;
    margin-top: 30rpx;
    .base-title {
      padding-left: 0;
    }
    .buttons {
      margin-top: 40rpx;
      .button {
        width: 128rpx;
        height: 48rpx;
        background: #ffffff;
        border-radius: 28rpx;
        border: 2rpx solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .button + .button {
        margin-left: 30rpx;
      }
      .info {
        color: #999999;
      }
      .edit {
        color: #409eff;
      }
    }
  }

  .add-receive-man {
    margin-top: 42rpx;
    height: 108rpx;
  }

  .scope-button {
    background: #ffffff;
    padding: 0 10rpx;
    box-shadow: 0px 0px 1px 0px #ccc;
    height: 98rpx;
    .text {
      font-size: 36rpx;
      font-family:
        Source Han Sans CN-Medium,
        Source Han Sans CN;
      font-weight: 500;
      color: #409eff;
      padding-right: 20rpx;
      border-right: 2rpx solid #e5e5e5;
    }
    .btn {
      width: 176rpx;
      height: 80rpx;
      background: #409eff;
      color: #fff;
      border-radius: 8rpx;
      padding-right: 0;
      border-right: none;
    }
  }
}
</style>
